<template>
  <!-- hang 0挂卖 1挂买 -->
  <div class="hang-group youke">
    <van-nav-bar
      :title="$route.query.hang==0?'挂卖':'挂买'"
      left-arrow
      fixed
      @click-left="onBack('/trading')"
    />
    <Main>
      <div>
        <van-field
          v-model="$store.getters.zhichans.ajf"
          label="可用资产"
          type="textarea"
          rows="1"
          readonly
          autosize
        >
          <span class="van-right-text" slot="right-icon">枚</span>
        </van-field>
      </div>
      <div class="inputs-group">
        <van-field
          v-model="requestParam.price"
          label="价格"
          type="number"
          rows="1"
          autosize
          :placeholder="`价格（${mins}~${maxs}）`"
        >
          <span class="van-right-text" slot="right-icon">¥</span>
        </van-field>
        <van-field
          v-model="requestParam.amount"
          label="数量"
          type="number"
          rows="1"
          autosize
          placeholder="数量"
        >
          <span class="van-right-text" slot="right-icon">枚</span>
        </van-field>
      </div>
      <div class="inputs-group">
        <van-field
          :value="$route.query.hang == 0 ? (requestParam.amount ? parseInt(requestParam.amount)  + parseFloat(requestParam.amount * rate)   :  ''): requestParam.amount * requestParam.price"
          label="需支付"
          type="number"
          rows="1"
          autosize
          readonly
          :placeholder="$route.query.hang == 0 ? '0.00 （包含'+ parseInt(rate*100)  +'%手续费）': '0.00 （包含0.0%手续费）'"
        >
          <span class="van-right-text" slot="right-icon">{{$route.query.hang==0?'枚':'¥'}}</span>
        </van-field>
        <van-field
          v-model="requestParam.code"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          type="number"
          v-if="$route.query.hang==0"
        >
          <div class="code-btn" slot="button" @click="getCode" v-if="getCodeStatus">获取验证码</div>
          <div class="code-btn" slot="button" v-else>重新获取({{second}})</div>
        </van-field>
      </div>
      <div class="inputs-group">
        <van-field
          v-model="requestParam.traderPass"
          label="交易密码"
          type="password"
          rows="1"
          autosize
          placeholder="请输入交易密码"
        />
      </div>
      <div class="rule-group-tip">
        <div class="rule-tip-title"></div>
        <div
          class="rule-tip-content"
         v-html="rules"></div>
      </div>
    </Main>
    <footer-btn :text="$route.query.hang==0?'确定挂卖':'确定挂买'" @btn-click="sendFun"></footer-btn>
  </div>
</template>

<script type="text/ecmascript-6">
import footerBtn from "@/components/common/footerBtn";
import { trads,guide, sms } from "@/api";

export default {
  //接收父级传递的参数
  props: [],
  //监听数据变化
  watch: {},
  data() {
    return {
      requestParam: {
        applicable: 700,
        price: "",
        amount: "",
        payment: "",
        code: "",
        traderPass: ""
      },
      rate: 0,
      sms: 0,
      second: 60,
      getCodeStatus: true,
      btndisable: true,
      mins:0,
      maxs:0,
      rules:""
    };
  },

  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {
    footerBtn
  },
  //执行方法
  methods: {
    getCode() {
      sms
        .code()
        .then(ret => {
          let that = this;
          that.sms = ret.result;
          that.getCodeStatus = !that.getCodeStatus;
          var timer = setInterval(function() {
            --that.second;
            if (that.second < 0) {
              that.second = 60;
              that.getCodeStatus = !that.getCodeStatus;
              clearInterval(timer);
            }
          }, 1000);
        })
        .catch(err => {});
    },
    sendFun() {
      let that = this;
      let _data = {
        je: that.requestParam.price,
        yzm: that.requestParam.code,
        jf: that.requestParam.amount,
        passwo: that.requestParam.traderPass
      };
      let hang = that.$route.query.hang;
      // 检验
      if (!that.requestParam.price) {
        this.$toast.fail("价格不能为空");
        return false;
      }
      if (!that.requestParam.amount) {
        this.$toast.fail("数量不能为空");
        return false;
      }

      if (!that.requestParam.code&&this.$route.query == 0) {
        this.$toast.fail("验证码不能为空");
        return false;
      }
      if (!that.requestParam.traderPass) {
        this.$toast.fail("交易密码不能为空");
        return false;
      }

      // 挂卖
      if (!this.btndisable) {
        this.$toast.fail("点击太频繁");
        return false;
      }
      this.btndisable = false;
      if (hang == 0) {
        trads.tradhang(_data).then(res => {
          that.$toast(res.reason);
          if (res.code == 1000) {
            setTimeout(function() {
              that.$router.push({ path: "/order/index" });
            }, 1000);
          }else{
              this.btndisable=true
          }
        });
      } else {
        trads.tradsell(_data).then(res => {
          that.$toast(res.reason);
          if (res.code == 1000) {
            setTimeout(function() {
              that.$router.push({ path: "/order/index" });
            }, 1000);
          }else{
              this.btndisable=true
          }
        });
      }
    },
     setbj(){
      trads.setbj().then(res=>{
         if(res.code==1000){
            this.mins=res.result.min;
            this.maxs = res.result.max;
         }
      })
    },
    // 交易规则
    jyrule() {
       guide.jyrule().then(res=>{
         if(res.code==1000){
           this.rules=res.result
         }
       })
    }

  },
  
  mounted() {
    if (0 == this.$route.query.hang) {
      trads
        .rate()
        .then(ret => {
          this.rate = ret.result;
        })
        .catch(err => {});
       
    }
     this.setbj()
     this.jyrule()
     this.$store.dispatch("addzhichan")
  }
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.hang-group {
  .code-btn {
    color: #4684fe;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      border-left: 1px solid #999999;
      height: 1rem;
      left: -0.6rem;
      top: 0.275rem;
    }
  }

  .rule-group-tip {
    padding: 0rem 1rem;
    margin-top: 1rem;

    .rule-tip-title {
      text-align: center;
      padding: 0.5rem 0;
    }

    .rule-tip-content {
      font-size: 0.9625rem;
    }
  }
}

.van-right-text {
  color: #000;
}
</style>
